<template>
  <cl-tabbar :value="active" @change='navNarChange' color='#ced2de' selected-color='#47c4d9' :before-switch="onBeforeSwitch" background-color="#fff">
    <cl-tabbar-item text="首页" name="home" icon-path="/static/images/components/BottomNavBar/homeN.webp" selected-icon-path="/static/images/components/BottomNavBar/home.webp">
    </cl-tabbar-item>
    <cl-tabbar-item text="点餐" name="menu" icon-path="/static/images/components/BottomNavBar/orderN.webp" selected-icon-path="/static/images/components/BottomNavBar/order.webp">
    </cl-tabbar-item>
    <cl-tabbar-item text="我的" name="mine" icon-path="/static/images/components/BottomNavBar/userN.webp" selected-icon-path="/static/images/components/BottomNavBar/user.webp">
    </cl-tabbar-item>
  </cl-tabbar>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  data() {
    return {
      timerId: null,
      visible: false
    }
  },
  computed: {
    ...mapState({
      active: store => store.navBarActive
    })
  },
  props: [],
  methods: {
    //点击切换按钮的时候调用仓库的内容
    navNarChange(name) {
      this.$store.dispatch('changeNavBar', name)
    },
    // //切换导航前
    onBeforeSwitch(name, next) {
      // 	if (name === 'scan') {
      // 		return
      // 	}
      uni.removeStorageSync("roomid");
      next()
    }
  }
}
</script>

<style>
</style>
